<<template>
  <div class="main_right">
    <div class="page_top">
      <section>
        <ol class="breadcrumb">
          <li>
            <router-link to="/nav/welcome">
              <span class="glyphicon glyphicon-home"></span> 首页
            </router-link>
          </li>
          <li>
              <span class="glyphicon glyphicon-list-alt"></span> 流固耦合分析
          </li>
          <li>流场仿真</li>
        </ol>
      </section>
    </div>
    <!-- 模型选择框 -->
    <el-container>
     <el-header>
      <el-row>
       <el-col>
        <label class="control-label" style="padding-left: 40px">
          <font size="4">水轮机工况：单机甩负荷</font>
        </label>
        <!-- 模型建立按钮 -->
        <label class="control-label" style="padding-left: 140px"></label>
        <el-button @click="seeModel()" type="primary" round><font size="4">模型建立</font></el-button>
        <!-- 采样时间选择框 -->
        <label class="control-label" style="padding-left: 140px">
          <font size="4">采样时间(s) &nbsp;</font>
        </label>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <!-- 开始仿真按钮 -->
        <label class="control-label" style="padding-left: 140px"></label>
        <el-button @click="startSimulation()" type="primary" round><font size="4">开始仿真</font></el-button>
       </el-col>
      </el-row>
     </el-header>

     <el-main>
        <!-- <el-row :gutter="20">
          <el-col :span="12">
            <el-card>
              <div slot="header">
                <span><font size="4">主进水阀三维模型</font></span>
              </div>
              <img src="../../../assets/flowSimulation/watermodel.png" width="580" height="380">
            </el-card>
          </el-col>

          <el-col :span="12">
            <div>
              <el-card>
                <div slot="header">
                  <span><font size="4">主进水阀网格模型</font></span>
                </div>
              <img src="../../../assets/flowSimulation/wanggemodel.jpg" width="580" height="380">
              </el-card>
            </div>
          </el-col>
        </el-row> -->

        <el-row :gutter="20">
          <el-col :span="12">
            <el-card>
              <div slot="header">
                <span><font size="4">主进水阀整体速度图</font></span>
              </div>
              <img src="../../../assets/flowSimulation/25liusu.png" width="580" height="400">
            </el-card>
          </el-col>

          <el-col :span="12">
            <div>
              <el-card>
                <div slot="header">
                  <span><font size="4">主进水阀整体压力图</font></span>
                </div>
                <img src="../../../assets/flowSimulation/25yali.png" width="580" height="400">
              </el-card>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-card>
              <div slot="header">
                <span><font size="4">主进水阀阀腔压力图</font></span>
              </div>
                <img src="../../../assets/flowSimulation/25faqiang.png" width="580" height="320">
            </el-card>
          </el-col>

          <el-col :span="12">
            <div>
              <el-card>
                <div slot="header">
                  <span><font size="4">流场仿真与数值仿真结果对比图</font></span>
                </div>
                <div style="height: 320px" id="myChart"></div>
              </el-card>
            </div>
          </el-col>
        </el-row>

      </el-main>
    </el-container>
  </div>
</template>

<style>
  .el-header {
    margin-top: 20px;}
  .el-row {
    margin-bottom: 20px;}
</style>

<script>
export default {
  name: "myChart",
  data() {
    return {
      chart: null,
      // 时间选择下拉框选项
      options: [
        {
          value: "选项1",
          label: "5"
        },
        {
          value: "选项2",
          label: "10"
        },
        {
          value: "选项3",
          label: "15"
        },
        {
          value: "选项4",
          label: "20"
        },
        {
          value: "选项5",
          label: "25"
        }
      ],
      value: "",

      getOption: function(
        legend,
        datax,
        datay1,
        datay2,
        namex,
        namey,
        markLine
      ) {
        var option3 = {
          tooltip: {
            show: true,
            trigger: "axis",
            axisPointer: {
              type: "line"
            }
          },
          legend: {
            data: ["仿真计算结果", "数值计算结果"]
          },
          // 辅助工具箱
          toolbox: {
            y: 1,
            top: 25,
            show: true,
            feature: {
              mark: {
                show: true
              },
              dataZoom: {
                show: true
              },
              dataView: {
                show: true
              },
              saveAsImage: {
                show: true
              },
              restore: {
                show: true
              }
            }
          },
          // 数据区域缩放
          dataZoom: {
            show: true,
            realtime: true,
            start: 0,
            end: 100,
            height: 20
          },
          grid: {
            left: "4%",
            right: "7%",
            bottom: "13%",
            containLabel: true
          },
          // 横轴坐标轴
          xAxis: [
            {
              boundaryGap: true,
              splitLine: { show: false },
              type: "category",
              axisLabel: {
                textStyle: {
                  color: "#333"
                }
              },
              data: datax,
              name: namex,
              nameLocation: "end",
              nameGap: "1",
              axisLine: {
                lineStyle: {
                  color: "#ccc"
                },
                onZero: false
              },
              nameTextStyle: {
                color: "#333",
                fontSize: 12
              },
              axisTick: {
                show: true
              }
            }
          ],

          // 纵轴坐标轴
          yAxis: [
            {
              type: "value",
              scale: true,
              name: namey
            }
          ],
          // 数据内容数组
          series: [
            {
              name: "仿真计算结果",
              type: "line",
              color: "blue",
              data: datay1
            },
            {
              name: "数值计算结果",
              type: "scatter",
              symbolSize: 5,
              color: "red",
              data: datay2
            }
          ]
        };
        return option3;
      }
    };
  },
  mounted() {
    this.initChart();
  },
  // 按钮方法
  methods: {
    startSimulation() {
      this.data = {
        categoryData: null,
        tmp: null,
        tsz: null
      };
      this.$http.get("../static/flow_Data.json").then(response => {
        this.dataRaw = response.data;
        //console.log(this.dataRaw);
        this.data.categoryData = [];
        this.data.tmp = [];
        this.data.tsz = [];
        for (var i = 0; i < 125; i++) {
          this.data.categoryData.push(Math.round((i + 1) * 2) / 10);
          this.data.tmp.push(Math.round(this.dataRaw.TmpyAxis[i]) / 1000000);
          this.data.tsz.push(Math.round(this.dataRaw.TszyAxis[i]) / 1000000);
        }
        this.chart.setOption(
          this.getOption(
            "压力",
            this.data.categoryData,
            this.data.tmp,
            this.data.tsz,
            "时间(s)",
            "压力(x10^6 Pa)"
          )
        );
      });
    },
    initChart() {
      this.chart = this.$echarts.init(document.getElementById("myChart"));
      // var option3 = this.getOption();
      this.chart.setOption(option3);
    }
  }
};
</script>

